import React from 'react'
import { Button, Checkbox, Form, Input } from 'antd';

export default function FormTest() {
    const onFinish = (values: any) => {
        // onFinish点击提交按钮会触发，values就是表单元素的数据对象
        console.log('Success:', values);
    };

    return (
        <Form
            name="basic"
            // 表单文字宽度
            labelCol={{ span: 6 }}
            // 表单元素的宽度
            wrapperCol={{ span: 10 }}
            // 样式设置
            style={{ maxWidth: 600 }}
            // 初始值
            initialValues={{ remember: true }}
            // 点击提交按钮触发
            onFinish={onFinish}

        >
            <Form.Item
                label="用户名"
                name="username"
                // 表单校验规则配置
                /**
                 * required: 是否必填
                 * message:如果违反该规则，错误提示
                 */
                rules={[{ required: false, message: '用户名必填!' }]}
            >
                <Input placeholder='请输入用户名' />
            </Form.Item>

            <Form.Item
                label="密码"
                name="password"
                rules={[{ required: true, message: 'Please input your password!' }]}
            >
                <Input.Password />
            </Form.Item>
            <Form.Item
                label='手机号'
                name='phoneNum'
                rules={[
                    {required:true,message:'手机号必填'},
                    {pattern:/^1[3-9]\d{9}$/,message:'手机号不合法'}
                ]}
            >
                <Input/>
            </Form.Item>
            <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 6, span: 16 }}>
                <Checkbox>Remember me</Checkbox>
            </Form.Item>



            <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
                <Button type="primary" htmlType="submit">
                    Submit
                </Button>
            </Form.Item>
        </Form>
    )
}
